<template>
  <div class="home">
    <div class="homeOne">
      <el-card shadow="always" style="height: 500px; margin: 50px">
        <el-row :gutter="13">
          <el-col :span="13">
            <div class="l-homeOne">
              <div>
                <h1>
                  Hi, I am <span style="font-size: 100px; color: hsl(227, 31%, 58%)">Pupa</span>
                </h1>
                <br />
                <h2>这是我的个人主页</h2>
                <h3>---本站内容有关个人介绍与个人学习</h3>
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="r-homeOne">
              <img
                :src="userImg"
                style="
                  width: 300px;
                  height: 300px;
                  border-radius: 50%;
                  margin-top: 80px;
                "
              />
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-skeleton
        :rows="3"
        animated
        style="text-align: left; margin: 20px 0"
      />
    </div>
    <div class="banner">
      <el-divider></el-divider>
      <h3>/电脑壁纸收藏/</h3>
      <el-divider></el-divider>
      <el-carousel :interval="4000" type="card" height="360px">
        <el-carousel-item v-for="(item, index) in list_img" :key="index">
          <h3 class="medium">
            <img referrer="no-referrer|origin|unsafe-url" :src="item.url" />
          </h3>
        </el-carousel-item>
      </el-carousel>
      <el-skeleton
        :rows="3"
        animated
        style="text-align: left; margin: 20px 0"
      />
    </div>

    <div class="learn-card">
      <div
        class="learn-card-title"
        style="font-size: 30px; padding-bottom: 20px"
      >
        <el-divider></el-divider>
        <h3>/个人学习相关内容展示/</h3>
        <el-divider content-position="right"
          >--以下内容仅为个人理解--</el-divider
        >
      </div>
      <el-row :gutter="13">
        <el-col :span="8">
          <el-card>
            <p>--打包上传基于vue2项目到gitee上--</p>
            <router-link to="/learn1">
              <el-button type="info" plain>查看详情</el-button>
            </router-link>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <p>--本网站项目的设计实现过程--</p>
            <router-link to="/learn2">
              <el-button type="info" plain>查看详情</el-button>
            </router-link>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <p>--项目一些功能的实现代码--</p>
            <router-link to="/learn3">
              <el-button type="info" plain>查看详情</el-button>
            </router-link>
          </el-card>
        </el-col>
        <el-col :span="8"
          ><el-card><p>--功能未实现与解决之路--</p>
            <router-link to="/learn4">
              <el-button type="info" plain>查看详情</el-button>
            </router-link></el-card
        ></el-col>
        <el-col :span="8"
          ><el-card><p>--vuex的安装与使用篇--</p>
            <router-link to="/learn5">
              <el-button type="info" plain>查看详情</el-button>
            </router-link></el-card
        ></el-col>
        <el-col :span="8"
          ><el-card><p>--axios的安装与使用--</p>
            <router-link to="/learn6">
              <el-button type="info" plain>查看详情</el-button>
            </router-link></el-card
        ></el-col>
        <el-col :span="8"
          ><el-card><el-empty :image-size="50"></el-empty></el-card
        ></el-col>
      </el-row>
      <el-skeleton
        :rows="3"
        animated
        style="text-align: left; margin: 20px 0"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "vueHome",
  data() {
    return {
      userImg: require("@/assets/image/user.png"),
      value: new Date(),
      list_img: [
        { url: require("../../src/assets/image/home1.jpg") },
        { url: require("../../src/assets/image/home2.jpg") },
        { url: require("../../src/assets/image/home3.jpg") },
        { url: require("../../src/assets/image/home4.jpg") },
        { url: require("../../src/assets/image/home5.jpg") },
      ],
    };
  },
  mounted() {
    this.$http.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  }
};
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  font-family: "Times New Roman", Times, serif;
  color: hsl(227, 31%, 58%);
}
.homeOne {
  padding-bottom: 50px;
  .l-homeOne {
    display: flex;
    padding: 90px 0 0 100px;
    color: hsl(227, 31%, 70%);
    text-align: left;
    h1 {
      font-size: 60px;
    }
    h2 {
      font-size: 25px;
      padding: 10px 0;
    }
    .r-homeOne {
      display: flex;
    }
  }
}
.banner {
  padding-bottom: 50px;
  h3 {
    margin: 20px 0;
    font-size: 30px;
  }
}
.learn-card {
  h3 {
      margin: 20px 0;
      font-size: 30px;
    }
  .el-card {
    height: 200px;
    margin-bottom: 20px;
    font-size: 25px;
    color: hsl(227, 31%, 58%);
    padding-top: 40px;
    p{
      padding-bottom: 20px;
    }
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>